<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin: 200px auto 0;
            padding: 0;
            width: 400px;
            height: 70px;
        }

        li {
            list-style: none;
            position: relative;
            width: 50px;
            height: 70px;
            overflow: hidden;
            float: left;
        }

        li div {
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 140px;
        }

        li img {
            float: left;
        }

        li span {
            display: block;
            background: url('image/c.jpg');
            width: 50px;
            height: 70px;
        }

        li span.active {
            background: url('image/b.jpg');
        }
    </style>

</head>

<body>
    <ul id="box">
        <li>
            <div>
                <img src="../image/0.jpg" />
                <img src="../image/0.jpg" />
            </div>
        </li>
        <li>
            <div>
                <img src="../image/0.jpg" />
                <img src="../image/0.jpg" />
            </div>
        </li>
        <li><span class="active"></span></li>
        <li>
            <div>
                <img src="../image/0.jpg" />
                <img src="../image/0.jpg" />
            </div>
        </li>
        <li>
            <div>
                <img src="../image/0.jpg" />
                <img src="../image/0.jpg" />
            </div>
        </li>
        <li><span></span></li>
        <li>
            <div>
                <img src="../image/0.jpg" />
                <img src="../image/0.jpg" />
            </div>
        </li>
        <li>
            <div>
                <img src="../image/0.jpg" />
                <img src="../image/0.jpg" />
            </div>
        </li>
    </ul>

</body>
<script>

    /*
    
        1，修改第二张图片的地址。
        2，往上运动。
        3，修改第一张图片的地址。
        4，拉回到原点。
    
    */

    var oBox = document.getElementById('box');
    var aDiv = oBox.getElementsByTagName('div');
    var aSpan = oBox.getElementsByTagName('span');

    showTime();
    setInterval(showTime, 1000);
    setInterval(function () {

        if (aSpan[0].className) {

            aSpan[0].className = '';
            aSpan[1].className = '';

        } else {

            aSpan[0].className = 'active';
            aSpan[1].className = 'active';

        }

    }, 500);


    function showTime() {
        var oDate = new Date();
        var h = addZero(oDate.getHours());
        var m = addZero(oDate.getMinutes());
        var s = addZero(oDate.getSeconds());

        var str = h + m + s;

        for (var i = 0; i < aDiv.length; i++) {

            if (aDiv[i].t != str.charAt(i)) {
                fnMove(aDiv[i], str.charAt(i));
                aDiv[i].t = str.charAt(i);
            }

        }

    }

    function fnMove(obj, n) {

        var aImg = obj.getElementsByTagName('img');

        aImg[1].src = "../image/" + n + ".jpg";

        doMove(obj, function () {
            aImg[0].src = "../image/" + n + ".jpg";
            obj.style.top = "0px";
        })
    }


    function doMove(obj, endFn) {

        var iTop = 0; //设置图片的初始位置。
        var timer = null;

        timer = setInterval(function () {

            iTop -= 5;

            if (iTop <= -70) {
                iTop = -70;
                clearInterval(timer);
            }

            obj.style.top = iTop + 'px';

            if (iTop == -70) {
                if (typeof endFn == 'function') endFn();
            }

        }, 30);
    }

    function addZero(n) {
        return n < 10 ? '0' + n : '' + n;
    }

    //alert(  false ? 1 : 2 );

</script>

</html>